<template>
	<el-card>
		<!--头像昵称卡片-->
		<div class="user-info" style="height: 80px;">
			<el-tooltip effect="dark" content="我的主题" placement="top-start" >
				<el-image style="width: 80px; height: 80px; border-radius: 50%" :src="avatar"/>
			</el-tooltip>
			<div >
				<div style="margin-bottom: 14px; color: rgb(51.2, 126.4, 204);">欢迎回来!</div>
				<div style="color: #303133;">{{user.username}}</div>
			</div>
		</div>
		<el-button type="primary" icon="plus" style="width: 100%; margin-top: 20px;" @click="dialog = true" v-if="showPost">发布主题</el-button>
		<slot></slot>
		<FormDialog v-model="dialog"/>
	</el-card>
</template>
<script setup lang="ts">
import {computed, ref, defineProps} from 'vue'
import {useUserConfig} from '/@/stores/UserInfoConfig'
import FormDialog from './FormDialog.vue'
import header_image from '/src/assets/header.png'

const dialog = ref(false)

const props = defineProps({
	showPost: {
		type: Boolean,
		default: true
	}
})


const userConfig = useUserConfig()
const user = computed(()=>{
	return userConfig.userInfo
})
const avatar = computed(()=> {
  return user.value?.avatar ? '/api/' + user.value?.avatar : header_image
})
</script>
<style scoped lang="scss">
.user-info{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
</style>
